<template>
	<view class="content">
		<view style="background-color: #fff;padding: 20rpx;">
			<view style="color: #000000;font-weight: 500;">
				产品标题
			</view>
			<textarea style="margin-top:20rpx;padding: 20rpx; width: 100%;height: 340rpx;background: #F8F8F8;border-radius: 16rpx;"
				v-model="name" placeholder="请输入产品标题" name="" id="" cols="30" rows="10"></textarea>
		</view>
		<view style="background-color: #fff;padding: 20rpx;">
			<view style="color: #000000;font-weight: 500;">
				产品描述
			</view>
			<textarea style="margin-top:20rpx;padding: 20rpx; width: 100%;height: 340rpx;background: #F8F8F8;border-radius: 16rpx;"
				v-model="intro" placeholder="请输入产品描述" name="" id="" cols="30" rows="10"></textarea>
		</view>
		<view class="selectPopup-title">产品价格</view>
		<view class="selectPopup-tip">提示：价格区间和一口价不能同时选中；</view>
		<view class="selectPopup-title">价格区间</view>
		<view class="price-box flex">
			<input type="number" placeholder="请输入最低价" placeholder-class="pl">
			<view class="price-box-text">至</view>
			<input type="number" placeholder="请输入最高价" placeholder-class="pl">
		</view>
		<view class="selectPopup-title">一口价</view>
		<view class="price_content ">
			<input type="number" v-model="price" placeholder="请输入一口价" placeholder-class="pl" >
		</view>
		<uni-section class="sections" title="商品封面图" type="line">
			<view class="imgs">
				<view class="img-item-item" v-for="(item,index) in cover" :key="index">
					<image class="img" :src="item" mode="aspectFill"></image>
					<image class="del-img" src="/static/index/delete-picture.png" @tap="deletImg(index,'cover')" mode="">
					</image>
				</view>
				<view class="noUpdata" v-if="cover.length < 1" @tap="choiceImgs('cover')">
					<image class="upload" src="/static/image/find/upload.png" ></image>
					<view class="reminder">上传图片</view>
				</view>
			</view>
		</uni-section>
		<uni-section class="sections" title="商品轮播图" type="line">
			<view class="imgs">
				<view class="img-item-item" v-for="(item,index) in covers" :key="index">
					<image class="img" :src="item" mode="aspectFill"></image>
					<image class="del-img" src="/static/index/delete-picture.png" @tap="deletImg(index,'covers')" mode="">
					</image>
				</view>
				<view class="noUpdata" v-if="covers.length < 1" @tap="choiceImgs('covers')">
					<image class="upload" src="/static/image/find/upload.png"  ></image>
					<view class="reminder">上传图片</view>
				</view>
			</view>
		</uni-section>
		<view class="btn_list flex align-center justify-between" v-if="id">
			<view class="btn" @tap="submit">确认编辑</view>
			<view class="btn" @tap="del">删除</view>
		</view>
		<view class="btn" @click="submit">
			{{id ? '确认编辑' : '立即添加'}}
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				name:'',
				intro:'',
				cover:[],
				covers:[],
				price:'',
				id:''
			}
		},
		onLoad(e){
			this.id = e.id;
			this.getDetail()
		},
		methods:{
			getDetail(){
				this.$http.productDetail({product_id:this.id}).then(res=>{
					if(res.code == 1){
						this.name = res.data.name;
						this.intro = res.data.intro;
						this.cover = res.data.cover.split(',');
						this.covers = res.data.covers.split(',');
						this.price = res.data.price;
					}
				})
			},
			del(){
				this.$http.delProduct({ids:this.id}).then(res=>{
					if(res.code == 1){
						this.$helper.showN('已删除')
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}else{
						this.$helper.showN(res.msg)
					}
				})
			},
			submit(){
				var params = {
					name:this.name,
					intro:this.intro,
					cover:this.cover.join(','),
					covers:this.covers.join(','),
					price:this.price
				}
				if(this.id){
					params.id = this.id;
					this.$http.editProduct(params).then(res=>{
						if(res.code == 1){
							this.$helper.showN('已修改')
							setTimeout(()=>{
								uni.navigateBack()
							},500)
						}else{
							this.$helper.showN(res.msg)
						}
					})
				}else{
					this.$http.addProduct(params).then(res=>{
						if(res.code == 1){
							this.$helper.showN('已添加')
							setTimeout(()=>{
								uni.navigateBack()
							},500)
						}else{
							this.$helper.showN(res.msg)
						}
					})
				}
				
			},
			choiceImgs(type) {
				let isUpload = true;
				let count = 1;
				if(type == 'cover'){
					isUpload = this.cover.length < 1;
					count = 1 - this.cover.length;
				}else{
					isUpload = this.covers.length < 9;
					count = 9 - this.covers.length;
				}
				
				if (isUpload) {
					uni.chooseImage({
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera', 'album'], //从相册选择
						count: count,
						success: res => {
							this.isUploadImg = true;
							uni.showLoading({
								title: '图片处理中...',
								mask: true
							});
							this.uploadimg({
								path: res.tempFilePaths
							},type);
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '最多只能上传九张图片',
						duration: 2000
					});
				}
			},
			uploadimg(data,type) {
				let that = this;
				let i = data.i ? data.i : 0;
				let success = data.success ? data.success : 0;
				let fail = data.fail ? data.fail : 0;
			
				uni.showLoading({
					title: '正在上传第' + (success <= 0 ? 1 : success + 1) + '/' + data.path.length,
					mask: true
				});
				// 上传图之前先进行一次压缩
				uni.uploadFile({
					url: this.$http.baseUrl + '64803624da6de',
					filePath: data.path[i],
					name: 'file',
					success: resp => {
						let tempResult = JSON.parse(resp.data);
						if (tempResult.code == 1) {
							success++;
							uni.showToast({
								icon: 'none',
								title: '成功' + success + '张'
							});
							// this.tempFilePaths = this.tempFilePaths.concat([data.path[i]]);
							this[type].push(tempResult.data.url);
						} else {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: tempResult.msg
							});
						}
					},
					fail: err => {
						fail++;
						console.log('fail:' + i + 'fail:' + fail);
					},
					complete: () => {
						if (that.isUploadImg) {
							i++;
							if (i == data.path.length) {
								//当图片传完时，停止调用
								// uni.showToast({
								// 	icon: 'none',
								// 	title: '成功' + success + '张'
								// });
								// if (this.tempFilePaths.length >= 9) {
								// 	this.isAddShow = false;
								// }
								// if (this.imgLists.length >= 6) {
								// 	this.isAddShow = false;
								// }
							} else {
								//若图片还没有传完，则继续调用函数
								data.i = i;
								data.success = success;
								data.fail = fail;
								that.uploadimg(data,type); //递归，回调自己
							}
						} else {
							return;
						}
					}
				});
				return;
			},
		}
	}
</script>

<style lang="scss">
	.content{
		background-color: #fff;
		padding-bottom: 40rpx;
	}
	.selectPopup-title{
		font-size: 30rpx;
		color: #000000;
		margin: 20rpx 0 0 20rpx;
	}
	.sections-input {
		min-width: 414rpx;
		height: 64rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #150E33;
		text-align: right;
		padding-right: 30rpx;
		margin-top: 10rpx;
		line-height: 64rpx;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		background: #F8F8F8;
		&.pl{
			color: #999;
		}
	}
	.price-box{
		padding: 20rpx;
		input{
			width: 292rpx;
			
			background: #F8F8F8;
			border-radius: 8rpx;
			line-height: 76rpx;
			height: 76rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333;
			padding: 0 24rpx;
		}
		.pl{
			color: #CCCCCC;
		}
		.price-box-text{
			font-size: 24rpx;
			color: #000000;
			margin:0 20rpx;
			line-height: 76rpx;
		}
	}
	.price_content{
		width: 710rpx;
		height: 76rpx;
		background: #F8F8F8;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 20rpx auto;
		input{
			line-height: 76rpx;
			height: 100%;
			font-weight: 400;
			font-size: 28rpx;
			color: #333;
			padding: 0 24rpx;
			
		}
		.pl{
			color: #CCCCCC;
		}
	}
	.selectPopup-tip{
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
		margin-top: 16rpx;
		padding-left: 20rpx;
	}
	.btn_list{
		.btn{
			width: 300rpx;
		}
	}
	.btn {
		width: 686rpx;
		height: 88rpx;
		// background: #999;
		background: #000;
		color: #FEC92F;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		border-radius: 50rpx;
	}
	// 上传图片
	.imgs {
		width: 686rpx;
		margin: 0 auto;
		margin-top: 32rpx;
		display: flex;
		flex-wrap: wrap;
		.noUpdata {
			width: 200rpx;
			height: 200rpx;
			text-align: center;
			border: 1rpx solid #ccc;
			border-radius: 16rpx;
		
			.upload {
				width: 46rpx;
				height: 46rpx;
				margin: 50rpx 0 40rpx 0;
			}
		
			.reminder {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44rpx;
				color: #6C717A;
				opacity: 1;
			}
		}
		.img-item-item {
			width: 200rpx;
			height: 200rpx;
			margin-left: 43rpx;
			margin-bottom: 43rpx;
			flex-shrink: 0;
			position: relative;
	
			&:nth-of-type(3n+1) {
				margin-left: 0;
			}
	
			.img {
				display: block;
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 1;
			}
			
			.del-img {
				display: block;
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 12rpx;
				right: 10rpx;
				z-index: 99;
			}
		}
	}
</style>